<template>
    <div class="container">
        <el-row :gutter="20">
            <el-col v-for="item in foodItems" :key="item.id" :span="6">
                <el-card shadow="hover" class="food-card">
                    <img :src="item.image" alt="Food Image" class="food-image" />
                    <div class="food-info">
                        <h3 class="food-name">{{ item.name }}</h3>
                        <p class="food-category">{{ item.category }}</p>
                        <el-rate v-model="item.rating" disabled></el-rate>
                    </div>
                    <el-button type="primary" @click="toDetail(item.id)" class="detail-button">查看详情</el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import foot from "@/data/Foot";
const router = useRouter()

//从浏览器获取
const localData = JSON.parse(localStorage.getItem("sys_foot"))

const foodItems = ref([])
// 获取数据
if (!localData || localData == null) {
    foodItems.value = foot
    localStorage.setItem("sys_foot", JSON.stringify(foodItems.value))
} else {
    foodItems.value = localData
}
//携带参数跳转
const toDetail = (id) => {
    console.log('我进来了');
    let param = {
        footId: id
    }
    router.push({
        path: '/food-detail',
        query: param
    })
}
</script>

<style scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.food-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-align: center;
}

.food-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.food-info {
    margin: 10px 0;
}

.food-name {
    font-size: 1.2em;
    font-weight: bold;
}

.food-category {
    color: #888;
    font-size: 0.9em;
    margin: 5px 0;
}

.detail-button {
    margin-top: 10px;
    width: 100%;
}
</style>